<template>
  <div class="vip_order">
    <el-table :data="vipOrderList" border style="width: 100%">
      <!-- v-loading表示的是加载动画 -->
      <el-table-column
        prop="orderDetail"
        label="头像"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-avatar
            shape="square"
            :size="50"
            fit="scale-down"
            :src="scope.row.orderDetail[0].imageUrl"
          ></el-avatar>
          <!-- slot-scope="scope"获取当前行的数据，可以解构出当前插槽的数据 -->
          <!-- scope.row.headimgurl"表示的是，获取当前行的headimgurl数据 -->
        </template>
      </el-table-column>
      <el-table-column
        prop="order_id"
        label="订单编号"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="orderDetail[0].productName"
        label="产品名称"
        align="center"
        width="100"
      >
      </el-table-column>
      <el-table-column prop="address" label="地址" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="orderDetail[0].quantity"
        label="数量"
        align="center"
        width="80"
      >
      </el-table-column>
      <el-table-column prop="total_fee" label="总价" width="80" align="center">
      </el-table-column>
      <el-table-column
        prop="pay_status"
        label="支付状态"
        align="center"
        width="80"
      >
        <template v-slot="{ row }">
          {{ row.pay_status === 1 ? "已支付" : "未支付" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="order_status"
        label="订单状态"
        align="center"
        width="80"
      >
        <template v-slot="{row}">
          <span v-if="row.order_status==0">未提交</span>
          <span v-else-if="row.order_status==1">提交成功</span>
          <span v-else-if="row.order_status==2">已取消</span>
          <span v-else-if="row.order_status==4">交易关闭</span>
          <span v-else-if="row.order_status==5">退货</span>
          <span v-else-if="row.order_status==3">无效订单</span>

        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template v-slot="{ row }">
          <el-button
            class="caoZuoButton"
            type="primary"
            icon="el-icon-view"
            @click="checkStuInfo(row)"
            v-hasPay="[row.pay_status,row.order_status]"
            >去下单</el-button
          >
          <el-button
            class="caoZuoButton"
            type="danger"
            icon="el-icon-delete"
            @click="deleteStu(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  // 通过自定义指令来判断是否显示去下单
  directives: {
    hasPay: {
      inserted(el, binding) {
        // console.log(binding);
        //指令接收的是用户的支付状态
        //0未支付 显示去支付按钮
        //1已支付禁用去支付按钮
        let [pay_status,order_status] = binding.value
        //先保存当前按钮的类名
        let className = el.className;

        if (pay_status !== 0||order_status!==1) {
          //只要状态不是0，就禁用按钮
          el.disable = true; //禁用按钮
          el.className = className + " " + "is-disabled";
          // is-disableds是element中的禁用按钮的属性
        }
      },
    },
  },
  computed: {
    ...mapState(["vipOrderList"]),
  },
  methods: {
    ...mapActions(["GET_VIP_ORDER"]),
  },

  mounted() {
    this.GET_VIP_ORDER();
  },
};
</script>

<style scoped lang='less'>
.vip_order {
  padding-top: 20px;
}
.el-avatar {
  background: #fff;
  /deep/ img {
    width: 100%;
  }
}
</style>